.turntable-box {
  background: #fadd95;
  box-shadow: inset 0 0 16px #ff9a2e;
  border-radius: 12px;
  box-sizing: border-box;
  position: relative;
  padding: 24px;
  width: 100%;
  height: 100%;

  .left-right {
    position: absolute;
    top: 8px;
    display: flex;
    align-items: center;
    width: 24px;
    height: calc(100% - 16px);
    justify-content: space-between;
    flex-direction: column;
  }
  .up-down {
    position: absolute;
    left: 8px;
    display: flex;
    align-items: center;
    height: 24px;
    width: calc(100% - 16px);
    justify-content: space-between;

    .turntable-box .up-down .left-border-dot {
      transform: translateX(-100%);
    }
    .turntable-box .up-down .right-border-dot {
      transform: translateX(100%);
    }
  }
  .upper-border {
    top: 0;
  }
  .lower-border {
    bottom: 0;
  }
  .left-border {
    left: 0;
    .vertex {
      visibility: hidden;
    }
  }
  .right-border {
    right: 0;
    .vertex {
      visibility: hidden;
    }
  }
  .dot {
    border-radius: 50%;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
  }
  .vertex {
    background: #e37815;
  }
  .border {
    border: 1.5px solid #fff7e8;
  }
  .white {
    background: #fff7e8;
  }
  .blocks {
    width: 100%;
    height: 100%;
    .item-container {
      width: 100%;
      height: 100%;
      background: #e37815;
      border-radius: 8px;
      padding: 16px;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      flex-direction: column;
      align-content: space-between;
    }
  }
}
